<template>
	<view class="page">
		<view class="inp">
			<u-input v-model="value" fontSize="12" border="surround" placeholder="请输入">
				<template slot="prefix">
					<u-icon name="search" color="#9e9e9e" size="24"></u-icon>
				</template>
			</u-input>
			<view style="width: 120rpx; text-align: center;">搜索</view>
		</view>

		<view class="top">
			<view class="top-name" @click="show = true">
				<view>近半年</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<u-line length="12" direction="col"></u-line>
			<view class="top-name">
				<view>费用高低</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<u-line length="12" direction="col"></u-line>
			<view class="top-name">
				<view>维修状态</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
			<u-line length="12" direction="col"></u-line>
			<view class="top-name">
				<view>筛选</view>
				<u-icon name="arrow-down"></u-icon>
			</view>
		</view>
		<view style="font-size: 24rpx; margin: 20rpx;">共<text style="color:#257CFF">99</text>条数据</view>

		<view class="content" @click="$goBack(2,'/bundle/pages/vehicledetails/vehicledetails')">
			<view class="order">
				<!-- <image class="img" src="../../../static/20230328061106_d73a2.jpg"></image> -->
				<view class="content1">
					<view class="content-name">五菱宏光-MQ5</view>
					<view class="content-map">官方续航：240-280km</view>
					<view class="content-map">2018年11月/微面/12386公里</view>
					<view class="content-ma">售价：<text>3.5</text>万</view>
				</view>
				<u-button  customStyle="margin-top: 80rpx;width:150rpx;height:70rpx;color:#000;font-size:28rpx;font-weight: 600;" color="#FBCC32">询底价</u-button>
			</view>
		</view>
		<u-action-sheet :actions="list" @select="selectClick" :show="show"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				list: [{
						name: '选项一'
					},
					{
						name: '选项二'
					}
				],
				show: false
			}
		},
		methods: {
			selectClick(e) {
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inp {
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		@include flex(row, space-between, center) font-size: 30rpx;
	}

	.top {
		padding: 20rpx;
		height: 84rpx;
		font-size: 28rpx;
		background-color: #fff;
		text-align: center;

		@include flex(row, space-between, center) .top-name {

			display: flex;
		}
	}

	.content {
		width: 718rpx;
		height: 210rpx;
		margin: 16rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 20rpx;

		.order {
			margin: 20rpx 10rpx;
			display: flex;

			.img {
				border-radius: 10rpx;
				width: 140rpx;
				height: 140rpx;
			}

			.content1 {
				width: 340rpx;
				margin-left: 20rpx;
				line-height: 40rpx;

				.content-name {
					font-size: 28rpx;
					font-weight: 600;
				}

				.content-map {
					font-size: 24rpx;
					// color:#949494 ;
				}

				.content-ma {
					font-size: 24rpx;

					text {
						font-size: 32rpx;
						color: #FF0000;
						font-weight: 600;
					}
				}
			}
		}

		.store {
			font-size: 26rpx;
			margin: 8rpx 0rpx;
		}

		.order-content {
			width: 666rpx;
			font-size: 24rpx;
			color: #666666;
			margin-bottom: 6rpx;
		}

		.time {
			margin-bottom: 8rpx;
			color: #949494;
			font-size: 24rpx;
		}

		.but {
			margin-top: 16rpx;
			font-size: 28rpx;

			@include flex(row, space-between, center) .button {
				color: #257CFF;
			}
		}
	}

	::v-deep .u-transition {
		// position: absolute !important; 
		top: 120rpx !important;
	}

	::v-deep .u-input {
		margin: 0rpx 40rpx 0rpx 32rpx;
		background-color: #efefef !important;

	}
</style>